<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="demo/css/reset.css"> <!-- CSS reset -->
	<link rel="stylesheet" href="demo/css/style.css">
	<link rel="shortcut icon" href="demo/favicon.ico">
	<title>Grayic Web Font</title>
</head>
<body>
	<header>
		<h1>Grayic Web Font</h1>
		<p>Built with <a href="https://nucleoapp.com">nucleoapp.com</a></p>
	</header>

	<div id="icons-wrapper">
		<section>
			<ul>
                
                    <li>
                        <i class="icon icon-tail-right"></i>
                        <p>icon-tail-right</p>
                    </li>
                
                    <li>
                        <i class="icon icon-tail-left"></i>
                        <p>icon-tail-left</p>
                    </li>
                
                    <li>
                        <i class="icon icon-small-up"></i>
                        <p>icon-small-up</p>
                    </li>
                
                    <li>
                        <i class="icon icon-small-down"></i>
                        <p>icon-small-down</p>
                    </li>
                
                    <li>
                        <i class="icon icon-small-right"></i>
                        <p>icon-small-right</p>
                    </li>
                
                    <li>
                        <i class="icon icon-small-left"></i>
                        <p>icon-small-left</p>
                    </li>
                
                    <li>
                        <i class="icon icon-triangle-right-17"></i>
                        <p>icon-triangle-right-17</p>
                    </li>
                
                    <li>
                        <i class="icon icon-card-update"></i>
                        <p>icon-card-update</p>
                    </li>
                
                    <li>
                        <i class="icon icon-tie-01"></i>
                        <p>icon-tie-01</p>
                    </li>
                
                    <li>
                        <i class="icon icon-puzzle-10"></i>
                        <p>icon-puzzle-10</p>
                    </li>
                
                    <li>
                        <i class="icon icon-plug"></i>
                        <p>icon-plug</p>
                    </li>
                
                    <li>
                        <i class="icon icon-laptop-71"></i>
                        <p>icon-laptop-71</p>
                    </li>
                
                    <li>
                        <i class="icon icon-goal-65"></i>
                        <p>icon-goal-65</p>
                    </li>
                
                    <li>
                        <i class="icon icon-handshake"></i>
                        <p>icon-handshake</p>
                    </li>
                
                    <li>
                        <i class="icon icon-archery-target"></i>
                        <p>icon-archery-target</p>
                    </li>
                
                    <li>
                        <i class="icon icon-connect"></i>
                        <p>icon-connect</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bulb-63"></i>
                        <p>icon-bulb-63</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chess-knight"></i>
                        <p>icon-chess-knight</p>
                    </li>
                
                    <li>
                        <i class="icon icon-shoe-woman"></i>
                        <p>icon-shoe-woman</p>
                    </li>
                
                    <li>
                        <i class="icon icon-plug-2"></i>
                        <p>icon-plug-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-roadmap"></i>
                        <p>icon-roadmap</p>
                    </li>
                
                    <li>
                        <i class="icon icon-roadmap-2"></i>
                        <p>icon-roadmap-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cards"></i>
                        <p>icon-cards</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cards-2"></i>
                        <p>icon-cards-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-mirror-2"></i>
                        <p>icon-mirror-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-layers-3"></i>
                        <p>icon-layers-3</p>
                    </li>
                
                    <li>
                        <i class="icon icon-layers-3-2"></i>
                        <p>icon-layers-3-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-code"></i>
                        <p>icon-code</p>
                    </li>
                
                    <li>
                        <i class="icon icon-code-2"></i>
                        <p>icon-code-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-code-editor"></i>
                        <p>icon-code-editor</p>
                    </li>
                
                    <li>
                        <i class="icon icon-book-open-2"></i>
                        <p>icon-book-open-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-app"></i>
                        <p>icon-app</p>
                    </li>
                
                    <li>
                        <i class="icon icon-3d-model"></i>
                        <p>icon-3d-model</p>
                    </li>
                
                    <li>
                        <i class="icon icon-3d-model-2"></i>
                        <p>icon-3d-model-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-app-2"></i>
                        <p>icon-app-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-apple"></i>
                        <p>icon-apple</p>
                    </li>
                
                    <li>
                        <i class="icon icon-android"></i>
                        <p>icon-android</p>
                    </li>
                
                    <li>
                        <i class="icon icon-apple-2"></i>
                        <p>icon-apple-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-android-2"></i>
                        <p>icon-android-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-palette"></i>
                        <p>icon-palette</p>
                    </li>
                
                    <li>
                        <i class="icon icon-palette-2"></i>
                        <p>icon-palette-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-leaf-80"></i>
                        <p>icon-leaf-80</p>
                    </li>
                
                    <li>
                        <i class="icon icon-leaf-80-2"></i>
                        <p>icon-leaf-80-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-battery-83"></i>
                        <p>icon-battery-83</p>
                    </li>
                
                    <li>
                        <i class="icon icon-battery-83-2"></i>
                        <p>icon-battery-83-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-drop"></i>
                        <p>icon-drop</p>
                    </li>
                
                    <li>
                        <i class="icon icon-drop-2"></i>
                        <p>icon-drop-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-popcorn"></i>
                        <p>icon-popcorn</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bowling-pins"></i>
                        <p>icon-bowling-pins</p>
                    </li>
                
                    <li>
                        <i class="icon icon-popcorn-2"></i>
                        <p>icon-popcorn-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bowling-pins-2"></i>
                        <p>icon-bowling-pins-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-theater"></i>
                        <p>icon-theater</p>
                    </li>
                
                    <li>
                        <i class="icon icon-theater-2"></i>
                        <p>icon-theater-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-music"></i>
                        <p>icon-music</p>
                    </li>
                
                    <li>
                        <i class="icon icon-brush"></i>
                        <p>icon-brush</p>
                    </li>
                
                    <li>
                        <i class="icon icon-music-2"></i>
                        <p>icon-music-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-brush-2"></i>
                        <p>icon-brush-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-soup"></i>
                        <p>icon-soup</p>
                    </li>
                
                    <li>
                        <i class="icon icon-soup-2"></i>
                        <p>icon-soup-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-energy"></i>
                        <p>icon-energy</p>
                    </li>
                
                    <li>
                        <i class="icon icon-energy-2"></i>
                        <p>icon-energy-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cupcake"></i>
                        <p>icon-cupcake</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cupcake-2"></i>
                        <p>icon-cupcake-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-watermelon"></i>
                        <p>icon-watermelon</p>
                    </li>
                
                    <li>
                        <i class="icon icon-watermelon-2"></i>
                        <p>icon-watermelon-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-opening-times"></i>
                        <p>icon-opening-times</p>
                    </li>
                
                    <li>
                        <i class="icon icon-mug"></i>
                        <p>icon-mug</p>
                    </li>
                
                    <li>
                        <i class="icon icon-pizza-slice"></i>
                        <p>icon-pizza-slice</p>
                    </li>
                
                    <li>
                        <i class="icon icon-opening-times-2"></i>
                        <p>icon-opening-times-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-mug-2"></i>
                        <p>icon-mug-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-pizza-slice-2"></i>
                        <p>icon-pizza-slice-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bell-53"></i>
                        <p>icon-bell-53</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bell-53-2"></i>
                        <p>icon-bell-53-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-pin-3"></i>
                        <p>icon-pin-3</p>
                    </li>
                
                    <li>
                        <i class="icon icon-pin-3-2"></i>
                        <p>icon-pin-3-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-gps"></i>
                        <p>icon-gps</p>
                    </li>
                
                    <li>
                        <i class="icon icon-gps-2"></i>
                        <p>icon-gps-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-face-recognition"></i>
                        <p>icon-face-recognition</p>
                    </li>
                
                    <li>
                        <i class="icon icon-sound"></i>
                        <p>icon-sound</p>
                    </li>
                
                    <li>
                        <i class="icon icon-microphone"></i>
                        <p>icon-microphone</p>
                    </li>
                
                    <li>
                        <i class="icon icon-business-agent"></i>
                        <p>icon-business-agent</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cctv"></i>
                        <p>icon-cctv</p>
                    </li>
                
                    <li>
                        <i class="icon icon-home"></i>
                        <p>icon-home</p>
                    </li>
                
                    <li>
                        <i class="icon icon-office"></i>
                        <p>icon-office</p>
                    </li>
                
                    <li>
                        <i class="icon icon-key"></i>
                        <p>icon-key</p>
                    </li>
                
                    <li>
                        <i class="icon icon-handshake-2"></i>
                        <p>icon-handshake-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-home-2"></i>
                        <p>icon-home-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cctv-2"></i>
                        <p>icon-cctv-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-fav-property"></i>
                        <p>icon-fav-property</p>
                    </li>
                
                    <li>
                        <i class="icon icon-fav-property-2"></i>
                        <p>icon-fav-property-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-key-2"></i>
                        <p>icon-key-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-business-agent-2"></i>
                        <p>icon-business-agent-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bookmark-2"></i>
                        <p>icon-bookmark-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bookmark-2-2"></i>
                        <p>icon-bookmark-2-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-pen-01"></i>
                        <p>icon-pen-01</p>
                    </li>
                
                    <li>
                        <i class="icon icon-pen-01-2"></i>
                        <p>icon-pen-01-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-hat-3"></i>
                        <p>icon-hat-3</p>
                    </li>
                
                    <li>
                        <i class="icon icon-hat-3-2"></i>
                        <p>icon-hat-3-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-tag"></i>
                        <p>icon-tag</p>
                    </li>
                
                    <li>
                        <i class="icon icon-tag-2"></i>
                        <p>icon-tag-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-gift-2"></i>
                        <p>icon-gift-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-gift-2-2"></i>
                        <p>icon-gift-2-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-receipt-list-43"></i>
                        <p>icon-receipt-list-43</p>
                    </li>
                
                    <li>
                        <i class="icon icon-receipt-list-43-2"></i>
                        <p>icon-receipt-list-43-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-maestro"></i>
                        <p>icon-maestro</p>
                    </li>
                
                    <li>
                        <i class="icon icon-maestro-2"></i>
                        <p>icon-maestro-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cart-simple"></i>
                        <p>icon-cart-simple</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cart-simple-2"></i>
                        <p>icon-cart-simple-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bag-09"></i>
                        <p>icon-bag-09</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bag-09-2"></i>
                        <p>icon-bag-09-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bicep"></i>
                        <p>icon-bicep</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bicep-2"></i>
                        <p>icon-bicep-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cycling"></i>
                        <p>icon-cycling</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cycling-2"></i>
                        <p>icon-cycling-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-distance"></i>
                        <p>icon-distance</p>
                    </li>
                
                    <li>
                        <i class="icon icon-distance-2"></i>
                        <p>icon-distance-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-trophy"></i>
                        <p>icon-trophy</p>
                    </li>
                
                    <li>
                        <i class="icon icon-trophy-2"></i>
                        <p>icon-trophy-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cpu"></i>
                        <p>icon-cpu</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cpu-2"></i>
                        <p>icon-cpu-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-voice-recognition"></i>
                        <p>icon-voice-recognition</p>
                    </li>
                
                    <li>
                        <i class="icon icon-voice-recognition-2"></i>
                        <p>icon-voice-recognition-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-phone-charging-3"></i>
                        <p>icon-phone-charging-3</p>
                    </li>
                
                    <li>
                        <i class="icon icon-phone-charging-3-2"></i>
                        <p>icon-phone-charging-3-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-phone-button"></i>
                        <p>icon-phone-button</p>
                    </li>
                
                    <li>
                        <i class="icon icon-pc-monitor"></i>
                        <p>icon-pc-monitor</p>
                    </li>
                
                    <li>
                        <i class="icon icon-headphones"></i>
                        <p>icon-headphones</p>
                    </li>
                
                    <li>
                        <i class="icon icon-media-player"></i>
                        <p>icon-media-player</p>
                    </li>
                
                    <li>
                        <i class="icon icon-screen-rotation"></i>
                        <p>icon-screen-rotation</p>
                    </li>
                
                    <li>
                        <i class="icon icon-screen-rotation-2"></i>
                        <p>icon-screen-rotation-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-headphones-2"></i>
                        <p>icon-headphones-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-headphones-2-2"></i>
                        <p>icon-headphones-2-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-headphones-2-3"></i>
                        <p>icon-headphones-2-3</p>
                    </li>
                
                    <li>
                        <i class="icon icon-pc-monitor-2"></i>
                        <p>icon-pc-monitor-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-media-player-2"></i>
                        <p>icon-media-player-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-touch-id"></i>
                        <p>icon-touch-id</p>
                    </li>
                
                    <li>
                        <i class="icon icon-touch-id-2"></i>
                        <p>icon-touch-id-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bike-bmx"></i>
                        <p>icon-bike-bmx</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bike-bmx-2"></i>
                        <p>icon-bike-bmx-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-airplane"></i>
                        <p>icon-airplane</p>
                    </li>
                
                    <li>
                        <i class="icon icon-airplane-2"></i>
                        <p>icon-airplane-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-drink-2"></i>
                        <p>icon-drink-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-drink-2-2"></i>
                        <p>icon-drink-2-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-verified"></i>
                        <p>icon-verified</p>
                    </li>
                
                    <li>
                        <i class="icon icon-verified-2"></i>
                        <p>icon-verified-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-at-sign"></i>
                        <p>icon-at-sign</p>
                    </li>
                
                    <li>
                        <i class="icon icon-at-sign-2"></i>
                        <p>icon-at-sign-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-zoom-2"></i>
                        <p>icon-zoom-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-phone-2"></i>
                        <p>icon-phone-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-trash-simple"></i>
                        <p>icon-trash-simple</p>
                    </li>
                
                    <li>
                        <i class="icon icon-simple-remove"></i>
                        <p>icon-simple-remove</p>
                    </li>
                
                    <li>
                        <i class="icon icon-send-2"></i>
                        <p>icon-send-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-signal-2"></i>
                        <p>icon-signal-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-link-69"></i>
                        <p>icon-link-69</p>
                    </li>
                
                    <li>
                        <i class="icon icon-lock"></i>
                        <p>icon-lock</p>
                    </li>
                
                    <li>
                        <i class="icon icon-unlocked"></i>
                        <p>icon-unlocked</p>
                    </li>
                
                    <li>
                        <i class="icon icon-phone-2-2"></i>
                        <p>icon-phone-2-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-fav-remove"></i>
                        <p>icon-fav-remove</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chat-round"></i>
                        <p>icon-chat-round</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chat-46"></i>
                        <p>icon-chat-46</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chat-33"></i>
                        <p>icon-chat-33</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chat-45"></i>
                        <p>icon-chat-45</p>
                    </li>
                
                    <li>
                        <i class="icon icon-attach-87"></i>
                        <p>icon-attach-87</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chart-bar-52"></i>
                        <p>icon-chart-bar-52</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chat-round-content"></i>
                        <p>icon-chat-round-content</p>
                    </li>
                
                    <li>
                        <i class="icon icon-check-2"></i>
                        <p>icon-check-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-pen"></i>
                        <p>icon-pen</p>
                    </li>
                
                    <li>
                        <i class="icon icon-heart-2"></i>
                        <p>icon-heart-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-fav-remove-2"></i>
                        <p>icon-fav-remove-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-ui-04"></i>
                        <p>icon-ui-04</p>
                    </li>
                
                    <li>
                        <i class="icon icon-phone-call"></i>
                        <p>icon-phone-call</p>
                    </li>
                
                    <li>
                        <i class="icon icon-lock-2"></i>
                        <p>icon-lock-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-unlocked-2"></i>
                        <p>icon-unlocked-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-heart-2-2"></i>
                        <p>icon-heart-2-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-email-83"></i>
                        <p>icon-email-83</p>
                    </li>
                
                    <li>
                        <i class="icon icon-pen-2"></i>
                        <p>icon-pen-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-check-2-2"></i>
                        <p>icon-check-2-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chat-round-2"></i>
                        <p>icon-chat-round-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chat-round-content-2"></i>
                        <p>icon-chat-round-content-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chat-33-2"></i>
                        <p>icon-chat-33-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chat-45-2"></i>
                        <p>icon-chat-45-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chart-bar-52-2"></i>
                        <p>icon-chart-bar-52-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-bold-remove"></i>
                        <p>icon-bold-remove</p>
                    </li>
                
                    <li>
                        <i class="icon icon-attach-87-2"></i>
                        <p>icon-attach-87-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-check-simple"></i>
                        <p>icon-check-simple</p>
                    </li>
                
                    <li>
                        <i class="icon icon-menu-dots"></i>
                        <p>icon-menu-dots</p>
                    </li>
                
                    <li>
                        <i class="icon icon-settings-gear-64"></i>
                        <p>icon-settings-gear-64</p>
                    </li>
                
                    <li>
                        <i class="icon icon-settings-gear-64-2"></i>
                        <p>icon-settings-gear-64-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-settings"></i>
                        <p>icon-settings</p>
                    </li>
                
                    <li>
                        <i class="icon icon-settings-2"></i>
                        <p>icon-settings-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-trash"></i>
                        <p>icon-trash</p>
                    </li>
                
                    <li>
                        <i class="icon icon-time-3"></i>
                        <p>icon-time-3</p>
                    </li>
                
                    <li>
                        <i class="icon icon-ui-04-2"></i>
                        <p>icon-ui-04-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-filter"></i>
                        <p>icon-filter</p>
                    </li>
                
                    <li>
                        <i class="icon icon-infinite"></i>
                        <p>icon-infinite</p>
                    </li>
                
                    <li>
                        <i class="icon icon-infinite-2"></i>
                        <p>icon-infinite-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-home-minimal"></i>
                        <p>icon-home-minimal</p>
                    </li>
                
                    <li>
                        <i class="icon icon-home-minimal-2"></i>
                        <p>icon-home-minimal-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-filter-2"></i>
                        <p>icon-filter-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cloud-25"></i>
                        <p>icon-cloud-25</p>
                    </li>
                
                    <li>
                        <i class="icon icon-cloud-25-2"></i>
                        <p>icon-cloud-25-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-single-02"></i>
                        <p>icon-single-02</p>
                    </li>
                
                    <li>
                        <i class="icon icon-single-02-2"></i>
                        <p>icon-single-02-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-users-wm"></i>
                        <p>icon-users-wm</p>
                    </li>
                
                    <li>
                        <i class="icon icon-users-wm-2"></i>
                        <p>icon-users-wm-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-camera-flash"></i>
                        <p>icon-camera-flash</p>
                    </li>
                
                    <li>
                        <i class="icon icon-camera-flash-2"></i>
                        <p>icon-camera-flash-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-ic_file_download_48px"></i>
                        <p>icon-ic_file_download_48px</p>
                    </li>
                
                    <li>
                        <i class="icon icon-ic_thumb_up_48px"></i>
                        <p>icon-ic_thumb_up_48px</p>
                    </li>
                
                    <li>
                        <i class="icon icon-ic_thumb_down_48px"></i>
                        <p>icon-ic_thumb_down_48px</p>
                    </li>
                
                    <li>
                        <i class="icon icon-hourglass"></i>
                        <p>icon-hourglass</p>
                    </li>
                
                    <li>
                        <i class="icon icon-hourglass-2"></i>
                        <p>icon-hourglass-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-time-3-2"></i>
                        <p>icon-time-3-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-time-3-3"></i>
                        <p>icon-time-3-3</p>
                    </li>
                
                    <li>
                        <i class="icon icon-chat-46-2"></i>
                        <p>icon-chat-46-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-laptop-1"></i>
                        <p>icon-laptop-1</p>
                    </li>
                
                    <li>
                        <i class="icon icon-laptop-1-2"></i>
                        <p>icon-laptop-1-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-grid-45"></i>
                        <p>icon-grid-45</p>
                    </li>
                
                    <li>
                        <i class="icon icon-grid-45-2"></i>
                        <p>icon-grid-45-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-layout-11"></i>
                        <p>icon-layout-11</p>
                    </li>
                
                    <li>
                        <i class="icon icon-layout-11-2"></i>
                        <p>icon-layout-11-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-sidebar"></i>
                        <p>icon-sidebar</p>
                    </li>
                
                    <li>
                        <i class="icon icon-sidebar-2"></i>
                        <p>icon-sidebar-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-email-84"></i>
                        <p>icon-email-84</p>
                    </li>
                
                    <li>
                        <i class="icon icon-email-84-2"></i>
                        <p>icon-email-84-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-menu-right"></i>
                        <p>icon-menu-right</p>
                    </li>
                
                    <li>
                        <i class="icon icon-menu-left"></i>
                        <p>icon-menu-left</p>
                    </li>
                
                    <li>
                        <i class="icon icon-menu-34"></i>
                        <p>icon-menu-34</p>
                    </li>
                
                    <li>
                        <i class="icon icon-menu-dots-2"></i>
                        <p>icon-menu-dots-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-minimal-left"></i>
                        <p>icon-minimal-left</p>
                    </li>
                
                    <li>
                        <i class="icon icon-minimal-right"></i>
                        <p>icon-minimal-right</p>
                    </li>
                
                    <li>
                        <i class="icon icon-stre-right"></i>
                        <p>icon-stre-right</p>
                    </li>
                
                    <li>
                        <i class="icon icon-stre-left"></i>
                        <p>icon-stre-left</p>
                    </li>
                
                    <li>
                        <i class="icon icon-menu-left-2"></i>
                        <p>icon-menu-left-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-menu-right-2"></i>
                        <p>icon-menu-right-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-menu-34-2"></i>
                        <p>icon-menu-34-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-triangle-right-17-2"></i>
                        <p>icon-triangle-right-17-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-puzzle-10-2"></i>
                        <p>icon-puzzle-10-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-logo-facebook"></i>
                        <p>icon-logo-facebook</p>
                    </li>
                
                    <li>
                        <i class="icon icon-logo-twitter"></i>
                        <p>icon-logo-twitter</p>
                    </li>
                
                    <li>
                        <i class="icon icon-logo-linkedin"></i>
                        <p>icon-logo-linkedin</p>
                    </li>
                
                    <li>
                        <i class="icon icon-logo-pinterest"></i>
                        <p>icon-logo-pinterest</p>
                    </li>
                
                    <li>
                        <i class="icon icon-instant-camera-2"></i>
                        <p>icon-instant-camera-2</p>
                    </li>
                
                    <li>
                        <i class="icon icon-logo-instagram"></i>
                        <p>icon-logo-instagram</p>
                    </li>
                
                    <li>
                        <i class="icon icon-logo-dribbble"></i>
                        <p>icon-logo-dribbble</p>
                    </li>
                
                    <li>
                        <i class="icon icon-logo-skype"></i>
                        <p>icon-logo-skype</p>
                    </li>
                
                    <li>
                        <i class="icon icon-logo-messenger"></i>
                        <p>icon-logo-messenger</p>
                    </li>
                
                    <li>
                        <i class="icon icon-logo-slack"></i>
                        <p>icon-logo-slack</p>
                    </li>
                
				<!-- list of icons here with the proper class-->
			</ul>
		</section>
	</div>
<script>
    function SelectText(element) {
	    var doc = document
	        , text = element
	        , range, selection;
	    if (doc.body.createTextRange) {
	        range = document.body.createTextRange();
	        range.moveToElementText(text);
	        range.select();
	    } else if (window.getSelection) {
	        selection = window.getSelection();
	        range = document.createRange();
	        range.selectNodeContents(text);
	        selection.removeAllRanges();
	        selection.addRange(range);
	    }
	}
    window.onload = function() {
    	var iconsWrapper = document.getElementById('icons-wrapper'),
    		listItems = iconsWrapper.getElementsByTagName('li');
        for (var i = 0; i < listItems.length; i++) {
		    listItems[i].onclick  = function fun(event) {
		    	var selectedTagName = event.target.tagName.toLowerCase();
		    	if( selectedTagName == 'p' || selectedTagName == 'em' ) {
		    		SelectText(event.target);
		    	} else if( selectedTagName == 'input' ) {
		    		event.target.setSelectionRange(0, event.target.value.length);
		    	}
		    }

		    var beforeContentChar = window.getComputedStyle(listItems[i].getElementsByTagName('i')[0], '::before').getPropertyValue('content').replace(/'/g, "").replace(/"/g, ""),
		    	beforeContent = beforeContentChar.codePointAt(0).toString(16);
		    var beforeContentElement = document.createElement("em");
		    beforeContentElement.textContent = "\\"+beforeContent;
		    listItems[i].appendChild(beforeContentElement);

		    //create input element to copy/paste chart
		    var charCharac = document.createElement('input');
		    charCharac.setAttribute('type', 'text');
		    charCharac.setAttribute('maxlength', '1');
		    charCharac.setAttribute('readonly', 'true');
		    charCharac.setAttribute('value', beforeContentChar);
		    listItems[i].appendChild(charCharac);
		}
    }
</script>
</body>
</html>
